<template>
	<el-dialog :title="dialogTitle" :visible.sync="visible" fullscreen append-to-body custom-class="policy_dialog_wrapper">
		<el-form v-bind="policyConfig" :model="formData" :rules="formRules" v-loading="loading">
			<div class="policy_form_content">
				<el-col :span="24">
					<el-form-item label="公告标题" prop="title">
						<el-input v-model="formData.title" placeholder="请输入公告标题" maxlength="30" show-word-limit></el-input>
					</el-form-item>
				</el-col>
				<el-form-item label="新闻内容" prop="content" v-if="!!visible">
					<sw-tiny-editor v-model="formData.content" type="all" height="100%"></sw-tiny-editor>
				</el-form-item>
			</div>
			<div class="policy_form_attrbox">
				<div class="attrs">
					<el-form-item label="公告作者" prop="author">
						<el-input v-model="formData.author" placeholder="请输入公告作者"></el-input>
					</el-form-item>
					<el-form-item label="发布时间" prop="pudDate">
						<el-date-picker v-model="formData.pudDate" type="datetime" placeholder="选择日期时间" style="width: 100%"></el-date-picker>
					</el-form-item>
					<el-form-item label="排序" prop="orderBy">
						<el-input-number v-model="formData.orderBy" controls-position="right" :min="1" style="width: 100%"></el-input-number>
					</el-form-item>
					<el-form-item label="公告附件" prop="sysNoticeFilesList">
						<sw-file-uploader v-model="formData.sysNoticeFilesList" @remove="handleRemoveFile"></sw-file-uploader>
					</el-form-item>
				</div>
				<div class="button">
					<el-button size="medium" type="primary" :loading="loading" @click="handleSubmitForm()">{{ formTypeText }}</el-button>
					<el-button size="medium" @click="visible = false">取消</el-button>
				</div>
			</div>
		</el-form>
	</el-dialog>
</template>

<script>
import moment from 'moment';
import { mapGetters } from 'vuex';
import formMixins from '@/mixins/formMixins';
import { queryDetail, addNotice, updateNotice } from '@/api/basedata/sysNotice';
import { queryPageList, addNoticeFile, deleteNoticeFile } from '@/api/basedata/sysNoticeFiles';
export default {
	mixins: [formMixins],
	data() {
		return {
			formName: '通知公告',
			formRules: {
				title: [{ required: true, message: '请输入公告标题', trigger: 'blur' }],
				author: [{ required: true, message: '请输入公告作者', trigger: 'blur' }],
				pudDate: [{ required: true, message: '请选择发布时间', trigger: 'change' }],
				content: [{ required: true, message: '请输入公告内容', trigger: 'blur' }]
			},
			policyConfig: {
				ref: 'form',
				size: 'medium',
				labelPosition: 'top',
				class: 'policy_form_wrapper'
			}
		};
	},
	computed: {
		...mapGetters(['userInfo']),
		detailData() {
			return eval(queryDetail);
		},
		callFunction() {
			return eval(this.addOrEdit ? addNotice : updateNotice);
		},
		submitParams() {
			let params = { ...this.formData };
			let files = params.sysNoticeFilesList;
			if (this.addOrEdit) {
				params['type'] = 1;
				params['isShow'] = 0;
				params['orderBy'] = params.orderBy || 10;
				params['sysNoticeFilesList'] = files.map((n) => ({ fileId: n.id }));
			} else {
				let addFiles = files.filter((n) => !n.fileId);
				params['sysNoticeFilesList'] = addFiles.map((n) => ({ fileId: n.id }));
			}
			return params;
		}
	},
	methods: {
		formatFormParams() {
			if (!this.addOrEdit) {
				this.getNoticeFilesList();
			} else {
				this.$set(this.formData, 'author', this.userInfo.username);
				this.$set(this.formData, 'pudDate', moment().format('YYYY-MM-DD HH:mm:ss'));
			}
		},

		//获取通知公告附件
		async getNoticeFilesList() {
			let params = { page: 1, limit: 9999, noticeId: this.dataId };
			let result = await queryPageList(params).then((res) => res.data);
			if (result.code === '0') {
				this.$set(this.formData, 'sysNoticeFilesList', result.data || []);
			}
		},

		//提交请求之前
		async beforeSubmitForm() {
			let uploadFiles = this.submitParams?.sysNoticeFilesList || [];
			return Promise.all(uploadFiles.map((n) => this.addNoticeFileRequest(n)));
		},

		//添加通知公告附件
		async addNoticeFileRequest(data) {
			let params = { noticeId: this.dataId, noticeType: 1, ...data };
			let result = await addNoticeFile(params).then((res) => res.data);
			return Promise.resolve(result);
		},

		//删除通知公告附件
		async handleRemoveFile(data) {
			await deleteNoticeFile(data.id);
		}
	}
};
</script>
<style lang="scss">
.policy_dialog_wrapper .el-dialog__body {
	padding: 0;
}
</style>
<style lang="scss" scoped>
.policy_form_wrapper::v-deep {
	flex: 1;
	display: flex;
	overflow: hidden;
	.el-form-item__label {
		font-weight: bold;
	}
}
.policy_form_content {
	padding: 16px;
	flex: 1;
	overflow: hidden;
}
.policy_form_attrbox {
	display: flex;
	flex-direction: column;
	width: 20%;
	padding: 16px;
	min-width: 320px;
	.attrs {
		flex: 1;
		overflow: auto;
	}
	.button {
		text-align: right;
	}
}
.sw_tinymce_editor {
	height: calc(100vh - 195px);
}
</style>